<template>
	<view style="padding-bottom: 160upx;">
		<view class="zcModel-title zcJustifyC_between">车主和车辆信息</view>
		<view style="padding: 0 30upx;background-color: #FFFFFF;">
			<block v-for="(item,idx) in orderLists" :key="idx">
				<zc-card :zcIndex="idx" :cardItem="item"  @zcChengeValue="zcChangeValue"></zc-card>
			</block>
			<view class="zcPicker-model uni-flex zcAlignI_center">
				<view class="zcPicker-titel">被保人信息：</view>
				<view class="zcPicker-model-item">
					<checkbox-group @change="oldCheckboxChange">
						<label class="checkbox">
							<checkbox value="同车主" :checked="isInsuredShow1" :disabled="isDisabled" color="#FFFFFF" style="transform: scale(0.5);" />同车主
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="insured-model" v-show="!isInsuredShow1">
				<block v-for="(zcItem4,zcIdx4) in zcItems4" :key="zcIdx4" >
					<zc-card :zcIndex="zcIdx4" :cardItem="zcItem4" @zcChengeValue="zcOldChangeValue4"></zc-card>
				</block>
			</view>
			<view class="zcPicker-model uni-flex zcAlignI_center">
				<view class="zcPicker-titel">投保人信息：</view>
				<view class="zcPicker-model-item">
					<checkbox-group @change="checkboxChange">
						<label class="checkbox">
							<checkbox value="同车主" :checked="isInsuredShow" :disabled="isDisabled" color="#FFFFFF" style="transform: scale(0.5);" />同车主
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="insured-model" v-show="!isInsuredShow">
				<block v-for="(item4,idx4) in items4" :key="idx4" >
					<zc-card :zcIndex="idx4" :cardItem="item4" @zcChengeValue="zcChangeValue4"></zc-card>
				</block>
			</view>
			
			<block v-for="(item1,idx1) in orderLists1" :key="idx1">
				<zc-card :class="(idx1 === 1)?'zcItemBox':''" :zcIndex="idx1" :cardItem="item1" @zcChengeValue="zcChangeValue1"></zc-card>
			</block>
			<view class="zcPicker-model uni-flex zcAlignI_center zcJustifyC_between">
				<view class="zcPicker-titel">使用性质：</view>
				<view class="zcPicker-model-item">
					<picker mode="selector" :disabled="isDisabled" :value="picker1.index" :range="picker1.lists" @change="pickerChange1">
						<view class="uni-input">{{picker1.lists[picker1.index]}}</view>
					</picker>
				</view>
			</view>
            <view class="zcPicker-model uni-flex zcAlignI_center zcJustifyC_between">
            	<view class="zcPicker-titel">购车付款方式：</view>
            	<view class="zcPicker-model-item ">
            		<picker mode="selector" :disabled="isDisabled" :value="picker4.index" :range="picker4.lists" @change="(event) =>pickerChange1(4,event)">
            			<view class="uni-input">{{picker4.lists[picker4.index]}}</view>
            		</picker>
            	</view>
            </view>
            <view class="zcPicker-model uni-flex zcAlignI_center zcJustifyC_between">
            	<view class="zcPicker-titel">转续保：</view>
            	<view class="zcPicker-model-item ">
            		<picker mode="selector" :disabled="isDisabled" :value="picker5.index" :range="picker5.lists" @change="(event) =>pickerChange1(5,event)">
            			<view class="uni-input">{{picker5.lists[picker5.index]}}</view>
            		</picker>
            	</view>
            </view>
            <view class="zcPicker-model uni-flex zcAlignI_center zcJustifyC_between">
            	<view class="zcPicker-titel">货车类型：</view>
            	<view class="zcPicker-model-item ">
            		<picker mode="selector" :disabled="isDisabled" :value="picker6.index" :range="picker6.lists" @change="(event) =>pickerChange1(6,event)">
            			<view class="uni-input">{{picker6.lists[picker6.index]}}</view>
            		</picker>
            	</view>
            </view>
            <view class="uni-flex zcFlex_column">
                <view class="zcPicker-model uni-flex zcAlignI_center zcJustifyC_between">
                	<view class="zcPicker-titel">本店销售：</view>
                	<view class="zcPicker-model-item " v-show="picker7.isShow">
                		<picker mode="selector" :disabled="isDisabled" :value="picker7.index" :range="picker7.lists" @change="(event) =>pickerChange1(7,event)">
                			<view class="uni-input">{{picker7.lists[picker7.index]}}</view>
                		</picker>
                	</view>
                </view>
                <view class="zcPicker-model uni-flex zcAlignI_center">
                	<radio-group @change="(event)=>zcChengeRadio(1,event)" class="uni-flex zcFlex_row zcAlignI_center">
                		<block v-for="(item,idx) in optionBoxsItem1.optionBoxs" :key="idx">
                			<label class="radio uni-flex uni-flex-item zcJustifyC_center">
                				<radio :value="item.value" :disabled="isDisabled" color="#3CA4FA" :checked="optionBoxsItem1.value===item.text" :style="{'transform':'scale(0.5)',}"/>{{item.text}}
                			</label>
                		</block>
                	</radio-group>
                </view>
            </view>
            <view class="uni-flex zcFlex_column">
                <view class="zcPicker-model uni-flex zcAlignI_center zcJustifyC_between">
                	<view class="zcPicker-titel">网约车类别：</view>
                	<view class="zcPicker-model-item " v-show="picker8.isShow">
                		<picker mode="selector" :disabled="isDisabled" :value="picker8.index" :range="picker8.lists" @change="(event) =>pickerChange1(8,event)">
                			<view class="uni-input">{{picker8.lists[picker8.index]}}</view>
                		</picker>
                	</view>
                </view>
                <view class="zcPicker-model uni-flex zcAlignI_center">
                	<radio-group @change="(event)=>zcChengeRadio(2,event)" class="uni-flex zcFlex_row zcAlignI_center">
                		<block v-for="(item,idx) in optionBoxsItem2.optionBoxs" :key="idx">
                			<label class="radio uni-flex uni-flex-item zcJustifyC_center">
                				<radio :value="item.value" :disabled="isDisabled" color="#3CA4FA" :checked="optionBoxsItem2.value===item.text" :style="{'transform':'scale(0.5)',}"/>{{item.text}}
                			</label>
                		</block>
                	</radio-group>
                </view>
            </view>
			<block v-for="(item2,idx2) in orderLists2" :key="idx2">
				<zc-card :zcIndex="idx2" :cardItem="item2" @zcChengeValue="zcChangeValue2"></zc-card>
			</block>
		</view>
        
		<view v-if="OrderLabel.length>0" class="zcModel-title zcJustifyC_between">订单标签</view>
		<block v-for="(item,index) in OrderLabel" :key="index">
			<view class="uni-flex zcFlex_column" style="background-color: #FFFFFF;border-bottom: 3px solid #f8f8f8;">
				<view class="uni-flex zcJustifyC_between zcAlignI_center" style="padding: 20upx;">
					{{item.title}}：
					<input class="uni-flex-item" disabled="true" style="margin: 0 30upx;" type="text" :value="item.aValue" />
					<view @tap="zcPopupShow(index,item.isShow)" class="iconfont icon-sanjiaojiantoutriangular-copy"></view>
				</view>
				<view v-show="item.isShow" class="popup_content">
					<block v-for="(item1,idx) in item.list" :key="idx">
						<view :data-popupId="index" class="popup_item" :class="{active:item.actives.indexOf(idx) !== (-1)}" :id="idx" :style="{'flex': '0 0 '+item.row+'%'}">{{item1.Name}}</view>
					</block>
				</view>
			</view>
		</block>
        
		<view class="zcModel-title zcJustifyC_between" style="padding-bottom: 0;">险种信息</view>
		<view class="zctab-bar-box">
			<view class="zcUni-tab-bar">
					<!-- 自定义险种 选择栏 -->
					<view class="zc-tab-bar">
						<view class="zcJustifyC_between zcAlignI_center zcBizStyle">
							<checkbox-group :id='1' @change="zcTBcheckBox3">
								<label class="checkbox">
									<checkbox :checked="insures3.insure_traffic.isCheck" :disabled="isDisabled" style="transform: scale(0.5);"/>
								</label>
							</checkbox-group>
							<view style="flex-shrink: 0;flex: 1;">交强险</view>
							<view class="zcJustifyC_between zcAlignI_center" style="display: flex;flex: 1;position: relative;">
								<input type="text" placeholder-style="text-align: center;" :placeholder="items6[0].value?'':insures3.insure_traffic.isCheck?'':''" />
								<zc-card :zcIndex="0" :cardItem="items6[0]" @zcChengeValue="zcChangeValueB3" ></zc-card>
							</view>
						</view>
                        
                        <view class="zcModel-card-item uni-flex">
                        	<view style="flex-shrink: 0;line-height: 1.1;color: #333333;">备注：</view>
                        	<view class="zcModel-card-item-stext" >{{InsureTrafficComments?InsureTrafficComments:''}}</view>
                        </view>
						
						<view v-show="insures3.insure_traffic.isCheck">
							<block v-for="(item,index) in insures3.insure_traffic.insureItems" :key="index">
								<view class="zcJustifyC_between zcAlignI_center" style="display: flex;padding: 20upx 0;margin: 0 20upx;border-top: 1px solid #F5F5F5;">
									<checkbox-group :id='index' data-type="traffic" @change="tbCheckBox3">
										<label class="checkbox">
											<checkbox :checked="item.isCheck" :disabled="isDisabled" style="transform: scale(0.5);" />
										</label>
									</checkbox-group>
									<view style="flex-shrink: 0;flex: 1;" >{{item.title}}</view>
									<view class="zcLabel" v-show="item.isShowFreePay" :class="item.isFreePay?'zcLabelActive':''" :id='index' data-type="traffic">不计免赔</view>
									<view v-show="!item.isInsureAmountShow || !item.isInsureAmount" class="uni-flex uni-flex-item" style="width: 172upx;" ></view>
									<view v-if="item.isInsureAmount" v-show="item.isInsureAmountShow" class="zcPicker-model-item" :class="item.InputMethod === '保费和保额选择'?'iconfont icon-sanjiaojiantoutriangular-copy-after':''">
										<input v-if="item.InputMethod === '保费和保额手工录入'" :disabled="isDisabled" style="text-align: right;padding-left: 20upx;" type="text" :id='index' data-type="traffic" :value="item.value" @blur="pickerChangeTB4" placeholder="请录入保额" />
										<picker v-else-if="item.InputMethod === '保费和保额选择'" :disabled="isDisabled" mode="selector" :id='index' data-type="traffic" :value="item.value" :range="item.pickers" @change="pickerChangeTB4">
											<view class="uni-input">{{item.value}}</view>
										</picker>
									</view>
								</view>
							</block>
						</view>
						
						<view class="zcJustifyC_between zcAlignI_center zcBizStyle" >
							<checkbox-group :id='2' @change="zcTBcheckBox3">
								<label class="checkbox">
									<checkbox :checked="insures3.insure_biz.isCheck" :disabled="isDisabled" style="transform: scale(0.5);" />
								</label>
							</checkbox-group>
							<view style="flex-shrink: 0;flex: 1;" >商业险</view>
							<view class="zcJustifyC_between zcAlignI_center" style="display: flex;flex: 1;position: relative;">
								<input type="text" placeholder-style="text-align: center;" :placeholder="items6[1].value?'':insures3.insure_biz.isCheck?'':''" />
								<zc-card :zcIndex="1" :cardItem="items6[1]" @zcChengeValue="zcChangeValueB3" ></zc-card>
							</view>
						</view>
                        
                        <view class="zcModel-card-item uni-flex">
                        	<view style="flex-shrink: 0;color: #333333;flex: 1;">折扣：</view>
                            <view class="zcModel-card-item-stext uni-flex zcAlignI_center" style="width: 41%;">
                                <input type="digit" :value="InsureBizDiscount" disabled="true" style="border-bottom: 1rpx solid #999999;margin-right: 26rpx;color: #999999;" />%
                            </view>
                        </view>
                        <view class="zcModel-card-item uni-flex">
                        	<view style="flex-shrink: 0;line-height: 1.1;color: #333333;">备注：</view>
                        	<view class="zcModel-card-item-stext" style="color: #999999!important;" >{{InsureBizComments?InsureBizComments:''}}</view>
                        </view>
						
						<view v-show="insures3.insure_biz.isCheck">
							<block v-for="(item,index) in insures3.insure_biz.insureItems" :key="index">
								<view class="zcJustifyC_between zcAlignI_center" style="display: flex;padding: 20upx 0;margin: 0 20upx;border-top: 1px solid #F5F5F5;">
									<checkbox-group :id='index' data-type="biz" @change="tbCheckBox3">
										<label class="checkbox">
											<checkbox :checked="item.isCheck" :disabled="isDisabled" style="transform: scale(0.5);" />
										</label>
									</checkbox-group>
									<view style="flex-shrink: 0;flex: 1;" >{{item.title}}</view>
									<view class="zcLabel" v-show="item.isShowFreePay" :class="item.isFreePay?'zcLabelActive':''" :id='index' data-type="biz" >不计免赔</view>
									<view v-show="!item.isInsureAmountShow || !item.isInsureAmount" class="uni-flex uni-flex-item" style="width: 172upx;" ></view>
									<view v-if="item.isInsureAmount" v-show="item.isInsureAmountShow" class="zcPicker-model-item" :class="item.InputMethod === '保费和保额选择'?'iconfont icon-sanjiaojiantoutriangular-copy-after':''">
										<input v-if="item.InputMethod === '保费和保额手工录入'" :disabled="isDisabled" style="text-align: right;padding-left: 20upx;" type="text" :id='index' data-type="biz" :value="item.value" @blur="pickerChangeTB4" placeholder="请录入保额" />
										<picker v-else-if="item.InputMethod === '保费和保额选择'" :disabled="isDisabled" mode="selector" :id='index' data-type="biz" :value="item.value" :range="item.pickers" @change="pickerChangeTB4">
											<view class="uni-input">{{item.value}}</view>
										</picker>
									</view>
								</view>
							</block>
						</view>
						
					</view>
				<!-- </swiper> -->
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import zcCard from "../../components/zc-card/zc-card.vue"
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	
	let _this;
	export default {
		components:{
			zcCard,
			tabBar
		},
		data() {
			return {
				index:'0',
				isDisabled:true,
				isInsuredShow:false,
				isInsuredShow1:false,
				InsureOrderSN:'',	//订单SN
				InsureTrafficMoney:0,	// 交强险 费用
				InsureBizMoney:0,	// 商业险 费用
				InsureMoney:0,	// 总费用
				picker1:{
					index:0,
					lists:['非营运','营运']
				},
                picker4: {
                    index:0,
                    lists: this.$ZcPublic.Constant.PAY_TYPE
                },
                picker5: {
                    index:0,
                    lists: this.$ZcPublic.Constant.RENEW_TYPE
                },
                picker6: {
                    index:0,
                    lists: this.$ZcPublic.Constant.TRUCK_TYPE
                },
                picker7: {
                    index:0,
                    isShow:false,
                    lists: this.$ZcPublic.Constant.NEW_FORM
                },
                picker8: {
                    index:0,
                    isShow:false,
                    lists: this.$ZcPublic.Constant.INTERNET_CAR_TYPE
                },
                optionBoxsItem1:{
                    value:'本店续保',
                    optionBoxs:[
                        {
                            text:"本店续保",	//显示值
                            value:"本店续保",	//隐藏值
                        },
                        {
                            text:"本店新增",	//显示值
                            value:"本店新增",	//隐藏值
                        },
                    ]
                },
                optionBoxsItem2:{
                    value:'非网约车',
                    optionBoxs:[
                        {
                            text:"非网约车",	//显示值
                            value:"非网约车",	//隐藏值
                        },
                        {
                            text:"网约车",	//显示值
                            value:"网约车",	//隐藏值
                        },
                    ]
                },
				items4:[
					{
						title:'姓名',
						value:'',
						isTitleColon:true,
						isDisabled:true,
						type:"input",
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"投保人姓名",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					},
					{
						title:'证件类型',
						value:'0',
						isTitleColon:true,
						isDisabled:true,
						type:"picker",
						mode:'selector',
						width:30,
						picker:this.$ZcPublic.Constant.CAR_TYPE,
						rStyle:{type:""}
					},
					{
						title:'证件号',
						value:'',
						isTitleColon:true,
						isDisabled:true,
						type:"input",
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"投保人证件号",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					}
				],
				zcItems4:[	//被投保人信息
					{
						title:'姓名',
						value:'',
						isTitleColon:true,
						isDisabled:true,
						type:"input",
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"被保人姓名",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					},
					{
						title:'证件类型',
						value:'0',
						isTitleColon:true,
						isDisabled:true,
						type:"picker",
						mode:'selector',
						width:30,
						picker:this.$ZcPublic.Constant.CAR_TYPE,
						rStyle:{type:""}
					},
					{
						title:'证件号',
						value:'',
						isTitleColon:true,
						isDisabled:true,
						type:"input",
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"被保人证件号",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					}
				],
				orderLists1:[
					{
						title:'车牌号：',
						value:'',
						type:"input",
						isDisabled:true,
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					},
					{
						title:'车架号：',
						value:'',
						type:"input",
						isDisabled:false,
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					},
					{
						title:'发动机号：',
						value:'',
						type:"input",
						isDisabled:true,
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					},
					{
						title:'初登日期：',
						value:'',
						isDisabled:true,
						width:30,
						type:"picker",
						mode:'date',
						rStyle:{type:"icon",iconName:'calendar',fontSize:28}
					}
				],
				orderLists:[
					{
						title:'车主姓名：',
						value:'',
						type:"input",
						isDisabled:true,
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					},
					{
						title:'证件类型：',
						value:'0',
						type:"picker",
						isDisabled:true,
						mode:'selector',
						width:30,
						picker:this.$ZcPublic.Constant.CAR_TYPE,
						rStyle:{type:"icon",color:'#999999',iconName:'sanjiaojiantoutriangular-copy-after',fontSize:28}
					},
					{
						title:'证件号：',
						value:'',
						type:"input",
						isDisabled:true,
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					},
					{
						title:'联系电话：',
						value:'',
						type:"input",
						isDisabled:true,
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					},
					{
						title:'其他联系方式：',
						value:'',
						type:"input",
						isDisabled:true,
						width:30,
						inputStyle:{	//input输入框样式
							placeholderText:"",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
						},
						rStyle:{type:""}
					},
                    {
                    	title:'详细联系地址：',
                    	value:'',
                    	type:"input",
                    	isDisabled:true,
                    	width:30,
                    	inputStyle:{	//input输入框样式
                    		placeholderText:"",		//默认显示内容
                    		type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
                    	},
                    	rStyle:{type:""}
                    },
					{
						title:'车主类别：',
						value:'',
						type:"radio",
						isDisabled:true,
						width:30,
						optionBoxs:[	//选项框 样式
							{
								text:"个人",	//显示值
								value:"个人",	//隐藏值
								boxSize:0.5,	// 范围：0.5~1
								isBoxCheck:false,	//是否选中
								isBoxDisabled:true,		//是否禁止
								boxColor:"#3CA4FA"	//选中后样式颜色
							},
							{
								text:"企业",	//显示值
								value:"企业",	//隐藏值
								boxSize:0.5,	// 范围：0.5~1
								isBoxCheck:true,	//是否选中
								isBoxDisabled:true,		//是否禁止
								boxColor:"#3CA4FA"	//选中后样式颜色
							},
							{
								text:"机关团体",	//显示值
								value:"机关团体",	//隐藏值
								boxSize:0.5,	// 范围：0.5~1
								isBoxCheck:false,	//是否选中
								isBoxDisabled:true,		//是否禁止
								boxColor:"#3CA4FA"	//选中后样式颜色
							}
						],
						rStyle:{type:""}
					}
				],
				orderLists2:[
					{
						title:'新/旧/过户车：',
						value:'',
						type:"radio",
						isDisabled:false,
						width:30,
						optionBoxs:[	//选项框 样式
							{
								text:"新车",	//显示值
								value:"新车",	//隐藏值
								boxSize:0.5,	// 范围：0.5~1
								isBoxCheck:false,	//是否选中
								boxColor:"#3CA4FA",	//选中后样式颜色
							},
							{
								text:"旧车",	//显示值
								value:"旧车",	//隐藏值
								boxSize:0.5,	// 范围：0.5~1
								isBoxCheck:true,	//是否选中
								boxColor:"#3CA4FA"	//选中后样式颜色
							},
							{
								text:"过户车",	//显示值
								value:"过户车",	//隐藏值
								boxSize:0.5,	// 范围：0.5~1
								isBoxCheck:false,	//是否选中
								boxColor:"#3CA4FA"	//选中后样式颜色
							}
						],
						rStyle:{type:""}
					},
					{
						title:'过户日期：',
						value:'',
						isShow:false,
						isDisabled:true,
						width:30,
						type:"picker",
						mode:'date',
						rStyle:{type:"icon",iconName:'calendar',fontSize:28}
					}
				],
				items6:[
					{
						title:'',
						value:'',
						isTitleColon:false,
						isDisabled:false,
						type:"picker",
						mode:'date',
						width:0,
						rStyle:{type:"icon",iconName:'calendar',fontSize:28}
					},
					{
						title:'',
						value:'',
						isTitleColon:false,
						isDisabled:false,
						type:"picker",
						mode:'date',
						width:0,
						rStyle:{type:"icon",iconName:'calendar',fontSize:28}
					}
				],
				insures3:{
					insure_traffic:{	//交强险
						isCheck:false,	//是否选中 险种类型
						isShow:false,	// 是否显示当前险种类型
						insureItems:[	//险种列表
							
						]
					},
					insure_biz:{	//商业险
						isCheck:false,	//是否选中 险种类型
						isShow:false,	// 是否显示当前险种类型
						insureItems:[	//险种列表
							
						]
					}
				},
				saveInsures3:{
					InsureTrafficItems:[],
					InsureBizItems:[]
				},
				orderInfo:{},
                OrderLabel:[],	//	订单标签
                InsureTrafficComments:'', // 交强险 备注内容
                InsureBizComments:'',   // 商业险 备注内容
                InsureBizDiscount: ''   //商业险折扣
			}
		},
		onLoad(e) {
			_this = this;
			if (e.InsureOrderSN) {
				_this.InsureOrderSN = e.InsureOrderSN;
			}
			_this.zcQueryNonStopInsureTypeList('交强险');	// 查询 自定义 交强险、商业险 险种
			
		},
		methods: {
            //标签 操作
            zcPopupShow(index,bl) {		// 显示隐藏 标签选项
            	_this.OrderLabel[index].isShow = !bl;
            },
			zcQueryNonStopInsureTypeList(type) {	//自定义 险种
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QueryNonStopInsureTypeList',
						Data: {
							InsureTypeCategory:type
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('自定义 险种 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							
							let insureItems = [];
							
							for (let i = 0; i < resjson.data.length; i++) {
								let item = {
									isCheck:false,	//是否选中
									title:resjson.data[i].Name,	//险种名称
									isFreePay:false,	//是否 不计免赔
									isShowFreePay:false,	//是否显示 不计免赔
									value:'',	//所选 保额
									isInsureAmount:false,	//是否有 保额
									isInsureAmountShow:false,	//是否显示 保额
									InputMethod:resjson.data[i].InputMethod,
									pickers:resjson.data[i].PurchaseType.split('，')	//保额数据
								}
								if (resjson.data[i].FreePayCode) {
									item.isShowFreePay = true;
								}
								if (resjson.data[i].PurchaseType) {
									item.isInsureAmount = true;
								}
								
								insureItems.push(item);
							}	
							
							
							if (type === '交强险') {
								_this.saveInsures3.InsureTrafficItems = resjson.data;
								_this.insures3.insure_traffic.insureItems = insureItems;
								if (insureItems.length > 0) {
									_this.insures3.insure_traffic.isShow = true;
								}
								_this.zcQueryNonStopInsureTypeList('商业险');
							}else if (type === '商业险') {
								_this.saveInsures3.InsureBizItems = resjson.data;
								_this.insures3.insure_biz.insureItems = insureItems;
								
								//  查询 是否有 保单信息
								if (_this.InsureOrderSN) {
									_this.zcGetInsureOrder(_this.InsureOrderSN);
								}
								if (insureItems.length > 0) {
									_this.insures3.insure_biz.isShow = true;
								}
							}
						} else{
							
						}
					},
					Scope: this
				});
			},
			
			// 订单 详情接口
			zcGetInsureOrder(IOSN) {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_GetInsureOrder',
						Data: {
							SN:IOSN
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('算价订单 详情 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							let insureOrder = resjson.data;
							
							if (insureOrder) {
								_this.orderInfo = insureOrder;
								
								_this.orderLists1[0].value = insureOrder.VehiclePlateNo;	// 车牌号
								_this.orderLists1[1].value = insureOrder.VehicleVIN;	// 车架号
								_this.orderLists1[2].value = insureOrder.VehicleEngineNo;	// 发动机号
								_this.orderLists1[3].value = insureOrder.VehicleRegistryDate;	// 初登日期
								
								_this.orderLists2[0].value = insureOrder.VehicleRegType;	// 新/旧/过户车 / 车辆注册类别
								if (insureOrder.VehicleRegType === '过户车') {
									_this.orderLists2[1].isShow = true;
									_this.orderLists2[1].value = insureOrder.VehicleRegTransferDate;	// 过户日期
								}
								
								
								_this.orderLists[0].value = insureOrder.VehicleOwnerName;	// 车主姓名
								_this.orderLists[1].value = _this.orderLists[1].picker.indexOf(insureOrder.VehicleOwnerCardType);	// 证件类型
								_this.orderLists[2].value = insureOrder.VehicleOwnerCardNo;	// 证件号
								_this.orderLists[3].value = insureOrder.VehicleOwnerTelephone;	// 联系电话
								_this.orderLists[4].value = insureOrder.CustomerOtherContacts;	// 其他联系方式
                                _this.orderLists[5].value = insureOrder.VehicleOwnerAddress;	// 详细地址
								_this.orderLists[6].value = insureOrder.VehicleOwnerType;	// 车主类别
								
								_this.VehicleBizType = insureOrder.VehicleBizType;	// 使用性质
                                if (resjson.data.VehiclePayType) {
                                	_this.picker4.index = _this.picker4.lists.indexOf(resjson.data.VehiclePayType);		//购车 方式
                                }
                                if (resjson.data.InsureRenewType) {
                                	_this.picker5.index = _this.picker5.lists.indexOf(resjson.data.InsureRenewType);		//转续保
                                }
                                if (resjson.data.VehicleTruckType) {
                                	_this.picker6.index = _this.picker6.lists.indexOf(resjson.data.VehicleTruckType);		//货车类型
                                }
                               if (resjson.data.IsShopRenew) {
                               	_this.optionBoxsItem1.value = resjson.data.IsShopRenew;		// 本店销售
                               	if (resjson.data.IsShopRenew == '本店新增' && insureOrder.VehicleRegType === '旧车') {
                               	   _this.picker7.isShow = true;
                                      if (resjson.data.ShopNewFrom) {
                                          _this.picker7.index = _this.picker7.lists.indexOf(resjson.data.ShopNewFrom);
                                      }
                               	}
                               }
                               if (resjson.data.IsInternetCar) {
                               	_this.optionBoxsItem2.value = resjson.data.IsInternetCar;		// 网约车类别
                               	if (resjson.data.IsInternetCar == '网约车') {
                               	   _this.picker8.isShow = true;
                                      if (resjson.data.InternetCarType) {
                                          _this.picker8.index = _this.picker8.lists.indexOf(resjson.data.InternetCarType);
                                      }
                               	}
                               }
                                
                                
								_this.InsureBizDate = insureOrder.InsureBizStartDate;	// 商业险起期
								
								if (insureOrder.InsureBizItems.length > 0) {		// 商业险险种
									_this.InsureBizIsShow = true;
									_this.InsureBizItems = insureOrder.InsureBizItems;
								}
								
								_this.InsureTrafficDate = insureOrder.InsureTrafficStartDate;	//交强险 起期
								
								_this.InsureTrafficItems = insureOrder.InsureTrafficItems;	//交强险 险种
								
								_this.isInsuredShow1 = insureOrder.InsureManIsOwner;	// 被保人 是否为车主
								if (!insureOrder.InsureManIsOwner) {
									_this.zcItems4[0].value = insureOrder.InsureManName;	// 被保人姓名
									_this.zcItems4[1].value = _this.zcItems4[1].picker.indexOf(insureOrder.InsureManCardType);	// 被保人证件类型
									_this.zcItems4[2].value = insureOrder.InsureManCardNo;	// 被保人证件号
									
								}
								_this.isInsuredShow = insureOrder.InsureHolderIsOwner;	// 投保人 是否为车主
								if (!insureOrder.InsureHolderIsOwner) {
									_this.items4[0].value = insureOrder.InsureHolderName;	// 投保人姓名
									_this.items4[1].value = _this.items4[1].picker.indexOf(insureOrder.InsureHolderCardType);	//投保人证件类型
									_this.items4[2].value = insureOrder.InsureHolderCardNo;	// 投保人证件号
								}
								
								_this.InsureTrafficMoney = insureOrder.InsureTrafficMoney;	// 交强险 保费合计
								_this.InsureBizMoney = insureOrder.InsureBizMoney;	// 商业险 保费合计
								_this.InsureMoney = insureOrder.InsureMoney;	// 总保费合计
								
								//  是否禁止选择  0：为可选择  ， 1：禁止选择
								_this.orderLists1[0].isDisabled = true;	// 车牌号
								_this.orderLists1[1].isDisabled = true;	// 车架号
								_this.orderLists1[2].isDisabled = true;	// 发动机号
								_this.orderLists1[3].isDisabled = true;	// 初登日期
								
								_this.orderLists2[0].isDisabled = true;	// 新/旧/过户车 / 车辆注册类别
								_this.orderLists2[1].isDisabled = true;	// 过户日期
								
								_this.orderLists[0].isDisabled = true;	// 车主姓名
								_this.orderLists[1].isDisabled = true;	// 证件类型
								_this.orderLists[2].isDisabled = true;	// 证件号
								_this.orderLists[3].isDisabled = true;	// 联系电话
								_this.orderLists[4].isDisabled = true;	// 其他联系方式
								_this.orderLists[5].isDisabled = true;	// 车主类别
								
								_this.isDisabled = true;
								_this.zcItems4[0].isDisabled = true;
								_this.zcItems4[1].isDisabled = true;
								_this.zcItems4[2].isDisabled = true;
								_this.items4[0].isDisabled = true;
								_this.items4[1].isDisabled = true;
								_this.items4[2].isDisabled = true;
								
								_this.items6[0].isDisabled = true;
								_this.items6[1].isDisabled = true;
								
                                // 初始化 标签
                                _this.OrderLabel = [];
                                if (resjson.data.Labels !== null && resjson.data.Labels.length > 0) {
                                	for (let i = 0; i < resjson.data.Labels.length; i++) {
                                		if (resjson.data.Labels[i].childs !== null && resjson.data.Labels[i].childs.length > 0) {
                                			for (let j = 0; j < resjson.data.Labels[i].childs.length; j++) {
                                				let item = {
                                					title:resjson.data.Labels[i].childs[j].Name,
                                					Code:resjson.data.Labels[i].childs[j].Code,
                                					isShow:false,
                                					value:'',
                                					isDisabled:false,
                                					row:48,
                                					type:'audio',
                                					info:resjson.data.Labels[i].childs[j],
                                					actives:[],
                                					aValue:'',
                                					list:resjson.data.Labels[i].childs[j].childs
                                				}
                                				if (resjson.data.Labels[i].childs[j].sModel === '单选') {
                                					item.type = 'audio';
                                				}else if (resjson.data.Labels[i].childs[j].sModel === '多选') {
                                					item.type = 'checkbox';
                                				}
                                				if (resjson.data.Labels[i].childs[j].OnlyWrite) {
                                					item.isDisabled = true;
                                				}
                                				for (let s = 0; s < resjson.data.Labels[i].childs[j].childs.length; s++) {
                                					if (resjson.data.Labels[i].childs[j].childs[s].isS) {
                                						item.actives.push(s);
                                					}
                                				}
                                				for (let a = 0; a < item.actives.length; a++) {
                                					if (a === 0) {
                                						item.aValue = item.list[item.actives[a]].Name;
                                					}else {
                                						item.aValue = item.aValue +' , '+ item.list[item.actives[a]].Name;
                                					}
                                				}
                                				
                                				_this.OrderLabel.push(item);
                                				
                                				//  判断是否存在 二级标签
                                				for (let k = 0; k < resjson.data.Labels[i].childs[j].childs.length; k++) {
                                					
                                					if (resjson.data.Labels[i].childs[j].childs[k].oS !== null && resjson.data.Labels[i].childs[j].childs[k].isS && resjson.data.Labels[i].childs[j].childs[k].oS.length > 0) {
                                						
                                						for (let m = 0; m < resjson.data.Labels[i].childs[j].childs[k].oS.length; m++) {
                                							let item1 = {
                                								title:resjson.data.Labels[i].childs[j].childs[k].oS[m].Name,
                                								Code:resjson.data.Labels[i].childs[j].childs[k].oS[m].Code,
                                								isShow:false,
                                								value:resjson.data.Labels[i].childs[j].childs[k].Code,
                                								isDisabled:false,
                                								row:48,
                                								type:'audio',
                                								info:resjson.data.Labels[i].childs[j].childs[k].oS[m],
                                								actives:[],
                                								aValue:'',
                                								list:resjson.data.Labels[i].childs[j].childs[k].oS[m].childs
                                							}
                                							if (resjson.data.Labels[i].childs[j].childs[k].oS[m].sModel === '单选') {
                                								item1.type = 'audio';
                                							}else if (resjson.data.Labels[i].childs[j].childs[k].oS[m].sModel === '多选') {
                                								item1.type = 'checkbox';
                                							}
                                							if (resjson.data.Labels[i].childs[j].childs[k].oS[m].OnlyWrite) {
                                								item1.isDisabled = true;
                                							}
                                							for (let t = 0; t < resjson.data.Labels[i].childs[j].childs[k].oS[m].childs.length; t++) {
                                								if (resjson.data.Labels[i].childs[j].childs[k].oS[m].childs[t].isS) {
                                									item1.actives.push(t);
                                								}
                                							}
                                							for (let a = 0; a < item1.actives.length; a++) {
                                								if (a === 0) {
                                									item1.aValue = item1.list[item1.actives[a]].Name;
                                								}else {
                                									item1.aValue = item1.aValue +' , '+ item1.list[item1.actives[a]].Name;
                                								}
                                							}
                                							
                                							_this.OrderLabel.push(item1);
                                						}
                                						
                                					}
                                				}
                                				
                                			}
                                		}
                                	}
                                }
								
                                 _this.InsureTrafficComments = resjson.data.InsureTrafficComments;
                                 _this.InsureBizComments = resjson.data.InsureBizComments;
                                 _this.InsureBizDiscount = resjson.data.InsureBizDiscount;
								//  险种信息
								if (insureOrder.InsureTrafficSelected && insureOrder.InsureTrafficItems.length > 0) {
									_this.insures3.insure_traffic.isCheck = true;
									if (insureOrder.InsureTrafficStartDate) {
										_this.items6[0].value = insureOrder.InsureTrafficStartDate;
									}
									for (let i = 0; i < insureOrder.InsureTrafficItems.length; i++) {
										
										for (let j = 0; j < _this.insures3.insure_traffic.insureItems.length; j++) {
											if (insureOrder.InsureTrafficItems[i].InsureTypeName === _this.insures3.insure_traffic.insureItems[j].title) {
												_this.insures3.insure_traffic.insureItems[j].isCheck = true;
												_this.insures3.insure_traffic.insureItems[j].isFreePay = insureOrder.InsureTrafficItems[i].InsureTypeIsFreePay;	//是否 不计免赔
												_this.insures3.insure_traffic.insureItems[j].value = insureOrder.InsureTrafficItems[i].InsureAmountText;	//所选 保额
												_this.insures3.insure_traffic.insureItems[j].isInsureAmountShow = true;	//是否显示 保额
											}
										}
									}
								}
								if (insureOrder.InsureBizSelected && insureOrder.InsureBizItems.length>0) {
									_this.insures3.insure_biz.isCheck = true;
									if (insureOrder.InsureBizStartDate) {
										_this.items6[1].value = insureOrder.InsureBizStartDate;
									}
									for (let i = 0; i < insureOrder.InsureBizItems.length; i++) {
										
										for (let j = 0; j < _this.insures3.insure_biz.insureItems.length; j++) {
											if (insureOrder.InsureBizItems[i].InsureTypeName === _this.insures3.insure_biz.insureItems[j].title) {
												_this.insures3.insure_biz.insureItems[j].isCheck = true;
												_this.insures3.insure_biz.insureItems[j].isFreePay = insureOrder.InsureBizItems[i].InsureTypeIsFreePay;	//是否 不计免赔
												_this.insures3.insure_biz.insureItems[j].value = insureOrder.InsureBizItems[i].InsureAmountText;	//所选 保额
												_this.insures3.insure_biz.insureItems[j].isInsureAmountShow = true;	//是否显示 保额
											}
										}
									}
								}
								
							}
						} else{
							
						}
						
					},
					Scope: this
				})
			},
			
			
		}
	}
</script>

<style>
	.zcModel-title{padding: 20upx;font-weight: bold;display: flex;color: #999999;}
	
	.card_item{padding: 20upx!important;border-bottom: 1px solid #E5E5E5!important;}
	zc-card:last-child .card_item{border: none!important;}
	/* zc-card:nth-last-child(6) .card_item .card_item_text{flex: 1!important;} */
	.card_item input[disabled]{color: #999999!important;}
	.zcPicker-model{background-color: #FFFFFF;padding: 20upx;border-bottom: 1px solid #E5E5E5;}
	.zcPicker-titel{display: flex;flex-shrink: 0;width: 30%;}
	.zcPicker-model-item{display: flex;flex: 1;height: 100%;align-items: center;}
	.zcPicker-model-item picker[disabled]{width: 100%;height: 100%;color: #999999!important;}
	/* .card_item picker{flex: none!important;} */
	.card_item .uni-input{padding-left: 0!important;}
	.uni-input[disabled]{padding: 0 25upx;text-align: left;color: #999999!important;}
	radio-group label{display: flex;flex: none;align-items: center;padding: 0;}
	checkbox-group{display: flex;justify-content: center;}
	/* checkbox-group label{font-size: 34upx;} */
	radio-group label radio,checkbox-group label checkbox{margin-left: 20upx;}
	radio .wx-radio-input{border-radius: 20%;}
	checkbox[checked] .wx-checkbox-input{background-color: #3CA4FA;}
	checkbox[disabled] .wx-checkbox-input{background-color: #E5E5E5;}
	.card_item_text picker[disabled] .uni-input{color: #999999!important;}
	
	/* .card_item .card_item_text{position: relative;flex: none;} */
	.radio,.checkbox{align-items: center!important;display: flex;}
	.card_item_text input,.zcPicker-model-item picker,.card_item_text picker{padding-left: 36upx;}
	.zcPicker-model{justify-content: flex-start;}
	.card_item_text,.zcPicker-model-item{position: relative;flex: none!important;width: 60%!important;}
	.card_item_text>view{position: absolute;right: 0;color: #3CA4FA!important;margin-right: 20upx;z-index: 6;}
	
	.insured-model{border-bottom: 1px solid #E5E5E5;background-color: #FFFFFF;}
	.insured-model .card_model{background-color: #f7faff!important;}
	.insured-model .card_item_text picker .uni-input{z-index: 0;background-color: #f7faff!important;}
	.insured-model .card_item{border: none!important;padding: 0 20upx!important;}
	
	picker{flex: 1;}
	picker .uni-input{position: relative;padding: 0!important;}
	.card_item_text picker .uni-input{z-index: 1;}
	.zc-tab-bar picker:after{display: none;}
	picker:after{
		font-family: "iconfont" !important;
		font-size: 28upx;
		font-style: normal;
		font-weight: bold;
		position: absolute;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: '\e600';
		top: 0;
		right: 20upx;
		margin-top: 2upx;
	}
	
	.icon-sanjiaojiantoutriangular-copy-after:after{content: "\e600";font-weight: bold;color: #999999!important;}
	
	.zcModel-card{margin-bottom: 30upx;}
	.zcModel-card-item{background-color: #FFFFFF;padding: 10upx 0upx;box-sizing: border-box;}
	/* .zcModel-card-item view{box-sizing: border-box;color: #999999;}
	.zcModel-card-item view:first-child{width: 30%;color: #333333;} */
	/* .zcModel-card-item-text{white-space: normal;display: block;} */
	
	.zcItemBox .card_item_text,.zcItemBox .zcPicker-model-item { flex: 1!important; }
	
	
	/* 险种 样式 */
	.zctab-bar-box{
		/* width: 100%; */
		/* height: 100%; */
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20upx;
		box-sizing: border-box;
	}
	
	.zcUni-tab-bar{width: 100%;flex: 1;background-color: #FFFFFF;overflow: inherit;position: relative;display: flex;}
	.uni-swiper-tab{margin: 20upx 0;}
	.swiper-tab-list{font-size: 28upx!important;width: 15%!important;margin: 0 5%;}
	.zc-tab-bar{
		overflow: hidden;display: block;will-change:transform;transition: all 0.4S ease-in;
		width: 100%;background-color: #FFFFFF;
		/* margin-bottom: 200upx;position: absolute; */
	}
	.zc-tab-bar>view{padding: 20upx;}
	.zc-tab-bar>view>view{font-size: 28upx;}
	radio .wx-radio-input{border-radius: 20%;}
	.zc-tab-bar checkbox .wx-checkbox-input{border-radius: 100%;}
	/* checkbox .wx-checkbox-input.wx-checkbox-input-checked{background-color: #3CA4FA!important;} */
	.zc-tab-bar checkbox-group{justify-content: flex-end;width: inherit;}
	.zc-tab-bar checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{color: #FFFFFF!important;}
	.zc-tab-bar .card_item{border: none!important;padding: 0!important;}
	.zc-tab-bar zc-card{flex: 1;}
	.zc-tab-bar .checkbox{padding: 0!important;}.zc-tab-bar .checkbox checkbox{margin: 0!important;}
	.zc-tab-bar .card_item_text,.zc-tab-bar .zcPicker-model-item{width: 172upx!important;flex: 1!important;}
	.zc-tab-bar .card_item_text picker{padding-left: 0!important;}
	.zc-tab-bar .card_item_text picker .uni-input{z-index: 6;text-align: center!important;}
	
	.zcLabel{padding: 0 10upx;border-radius: 16upx;border: 2upx solid #C5C5C5;color: #C5C5C5;}
	.zcLabelActive{border-color:#3CA4FA;color: #3CA4FA;}
	
	.zc-tab-bar .uni-input{text-align: right;background-color: rgba(255,255,255,0.1);padding-right: 40upx;}
	
	.zcBizStyle{display: flex;border-top: 16upx solid #F5F5F5;}
	.zcBizStyle:first-child{border-top: none;}
	.zcBizStyle input{display: flex;flex: 1;position: absolute;right: 0;margin-left: 35upx;margin-right: 50upx;border-bottom: 1px solid #999999;}
	.zcBizStyle .uni-input{text-align: center;}
	
    
    /* 险种备注样式 */
    .zcModel-card-item-text{white-space: normal;display: block;min-height: 50rpx;line-height: 1.2!important;}
    .zcModel-card-item-stext{width:100%;height: 100%;min-height: 50rpx;line-height: 1.2!important;font-weight: normal;font-size: 30upx;color: #333333!important;}
    .zcModel-card-item-stext input {text-align: center;}
	/* ----------- END ------------ */
    /* 标签 */
    .popup_content{
    	display: flex;
    	flex-wrap: wrap;
    	padding: 10upx 20upx;
    	flex-direction: row;
    	background-color: #FFFFFF;
    }
    .popup_item{
    	display: flex;
    	float: left;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    	flex-shrink: 0;
    	border: 1px solid #999999;
    	color: #999999;
    	margin: 10upx 1%;
    	height: 52upx;
    	border-radius: 52upx;
    	box-sizing: border-box;
    }
    .active{border-color: #26a6ff;color: #26a6ff;}
    /* ----END----- */
	
	
	.zcCard-item{background-color: #FFFFFF;padding: 20upx;}
	.zcCard-item view{display: flex;align-items: center;flex-shrink: 0;}
	.zcCard-item view view{font-weight: bold;}
	
	.zcFooter-but{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10;background-color: #F4F5F6;}
	.zcFooter-but button:first-child{flex: 1;color: #FFFFFF;border-radius: 0;background-color: #CCCCCC;font-size: 32upx;padding: 10upx;}
	.zcFooter-but button:last-child{flex: 1;background-color: rgba(60, 164, 250, 1);color: #FFFFFF;border-radius: 0;font-size: 32upx;padding: 10upx;}
	.zcFooter-but .button-hover{opacity: 0.6;}
	
	.zcBut{border: 4upx solid rgba(60, 164, 250, 1);background-color: rgba(255, 255, 255, 1)!important;color: rgba(60, 164, 250, 1)!important;}
</style>
